<script setup>
import UNavbar from "../../uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import {ref} from "vue";
import {gamelist} from "../../request/api";
import {onLoad, onShareAppMessage, onShareTimeline} from "@dcloudio/uni-app";
const pageSize = ref({
  page:0,
  size:10,
  searchVal:'',//搜索
});
const raceList = ref([]);//比赛列表
onShareAppMessage(()=>{
  return {
    imageUrl:'/static/cover.png',
    path: '/pages/login/login',
  }
});
onShareTimeline(()=>{
  return{
    imageUrl:'/static/cover.png',
    path: '/pages/login/login',
  }
});
onLoad(()=>{
  getRaceList(false);
})
//比赛详情
const toDetail = (id) => {
  uni.navigateTo({
    url:"/pages/race-detail/race-detail?id="+id
  });
}
//获取比赛列表
const getRaceList = (isEmpty = false) => {
  uni.showLoading();
  if (typeof isEmpty ==='boolean' && isEmpty){
    pageSize.value.page=0;
    raceList.value = [];
  }
  pageSize.value.sort && delete pageSize.value.sort;
  pageSize.value.name && delete pageSize.value.name;
  if (pageSize.value.searchVal){
    if (parseInt(pageSize.value.searchVal)){
      pageSize.value.sort = parseInt(pageSize.value.searchVal)
    }else pageSize.value.name = pageSize.value.searchVal
  }else {

  }
  pageSize.value.page++;
  gamelist({
    ...pageSize.value
  }).then(res=>{
    uni.hideLoading();
    if (!res.data.length && raceList.value.length){
      uni.showToast({
        title:'已全部加载',
        icon:'none'
      });
    }
    raceList.value.push(...res.data);
  })
}
</script>

<template>
  <view class="index-page">
    <u-navbar placeholder left-icon="" left-text="比赛大厅" title=""></u-navbar>
    <view class="search">
      <image src="/static/search.png"></image>
      <input confirm-type="search" @confirm="getRaceList(true)" v-model="pageSize.searchVal" type="text" placeholder="搜索比赛序号或者运动员名字">
    </view>
    <scroll-view @scrolltolower="getRaceList(false)" scroll-y class="scroll-y">
      <view class="container">
        <view class="item" v-for="(item,index) of raceList" :key="index">
          <view class="title">
            <text>比赛序号：{{item.sort}}</text>
            <text>{{item.riqi}}</text>
          </view>
          <view class="desc">
            <image src="/static/cover.png"></image>
            <view class="count">
              <text>局数：{{item.jushu}}</text>
              <text>盘数：{{item.panshu}}</text>
              <text>地址：{{item.didian}}</text>
            </view>
            <text @click="toDetail(item.id)" class="see-detail">查看详情</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
.index-page {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .container {
    padding: 0 20rpx 20rpx 20rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .item {
      background: #FFFFFF;
      width: 100%;
      box-shadow: 0 0 20rpx 0 rgba(34, 34, 34, 0.1);
      border-radius: 16rpx;
      padding: 30rpx;
      display: flex;
      flex-direction: column;

      .desc {
        margin-top: 52rpx;
        display: flex;
        align-items: center;

        > text {
          margin-left: 8rpx;
          width: 141rpx;
          height: 56rpx;
          background: #2D6E37;
          border-radius: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 400;
          font-size: 24rpx;
          color: #FFFFFF;
        }

        view {
          display: flex;
          flex-direction: column;
          flex-grow: 1;
          gap: 21rpx;

          text {
            font-weight: 400;
            font-size: 26rpx;
            color: #333333;
          }
        }

        image {
          width: 141rpx;
          height: 124rpx;
          margin-right: 23rpx;
        }
      }

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        text {
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
        }
      }
    }
  }

  .search {
    height: 72rpx;
    margin: 0 20rpx 20rpx 20rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    border: 1px solid #999999;
    padding: 0 30rpx;
    display: flex;
    align-items: center;

    input {
      flex-grow: 1;
      margin-left: 10rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
    }

    image {
      width: 25rpx;
      height: 27rpx;
    }
  }
}
</style>
